import popup from '../internal/mixins/popup';
import {
  SlideTopTransition,
  SlideBottomTransition,
  SlideLeftTransition,
  SlideRightTransition,
  FadeTransition
} from '../internal/transitions';

export default {
  name: 'co-popup',
  mixins: [popup],
  props: {
    position: {
      type: String,
      default: 'bottom',
      validator (value) {
        return ['left', 'top', 'right', 'bottom', 'center'].indexOf(value) !== -1;
      }
    }
  },
  render (h) {
    const transition = {
      top: SlideTopTransition,
      bottom: SlideBottomTransition,
      left: SlideLeftTransition,
      right: SlideRightTransition,
      center: FadeTransition
    }[this.position];
    return h(transition, [
      this.open ? h('div', {
        staticClass: 'co-popup',
        style: {
          'z-index': this.zIndex
        },
        class: {
          [`co-popup--${this.position}`]: true
        }
      }, this.$slots.default) : null
    ]);
  }
};
